import React from 'react';

import {  LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex , message} from 'antd';

import axios from 'axios';

import './login.scss'
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router';
import { changeUserInfo } from './store/modules/user';
import {loginFn} from './api/userLogin';
import ajax from './utils/request';
import { changePath } from './store/modules/app';

// https://baimingxuan.github.io/react-router6-doc/start/concepts
// https://bpic.588ku.com/video_library/cover/24/06/20/61aea644e69b3dbe300ac5bed2212252_snapshot_t0.jpg
const App = () => {

    const dis = useDispatch()

    const router =useNavigate()

    // 登录按钮的点击事件
    const onFinish = (formData) => {
        // console.log(formData);

        // 必须要封装一下数据请求
        // axios.post('http://121.89.205.189:3000/admin/admin/login', formData).then(res => {
        //     console.log(res.data.data);
        //     // 1. 将用户数据保存起来
        //     dis(changeUserInfo(res.data.data))
        //     // 2. 跳转到首页
        //     router('/')
        //     // 3. 首页中，登录显示退出登录
        //     // 4. 实现退出功能
        // })

        // ajax({ url: '/admin/login', data: formData, method: 'post' }).then(res => {
        //     if (res.data.code == 200) {
        //         dis(changeUserInfo(res.data.data))
        //         router('/')
        //     } else {
        //         // 提示错误信息
        //     }
        // })

        loginFn(formData).then(res => { 
           if (res.code == 200) {
                // messageApi.success('恭喜登录成功💐')
                // messageApi.open({
                //     type: 'success',
                //     content: '恭喜登录成功💐'
                // })
                message.success('登录成功')
                dis(changeUserInfo(res.data))
                router('/')
                dis(changePath({
                    defaultOpenKeys: '/',
                    defaultSelectedKeys: 'home'
                }))
            } else {
                // 提示错误信息
            }
        })

    }


    return <>
        <div className='bg'>
            <div className="login_main">
                 <Form
                    name="login"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                <Form.Item
                    name="adminname"
                    rules={[{ required: true, message: '请输入账号!' ,type:'string' ,min:1}]}
                >
                    <Input  allowClear prefix={<UserOutlined />} placeholder="请输入管理员账号" />
                </Form.Item>
                {/* <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入正确的密码!',pattern:/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/}]}
                > */}
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入正确的密码!'}]}
                >
                    <Input.Password prefix={<LockOutlined />} type="password" placeholder="请输入密码" />
                </Form.Item>
                <Form.Item>
                    <Flex justify="space-between" align="center">
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>
                    <a href="">忘记密码</a>
                    </Flex>
                </Form.Item>

                <Form.Item>
                    <Button block type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
                </Form>
            </div>
        </div>
    </>
}

export default App;